// 引入action
import { getUser } from '../../redux/actions'

import { getRedirect } from '../../utils'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Switch, Route, Redirect } from 'react-router-dom'
import cookies from 'js-cookie'
import BossInfo from '../BossInfo/BossInfo'
import DashenInfo from '../DashenInfo/DashenInfo'
import Dashen from '../dashen/Dashen'
import Boss from '../Boss/Boss'
import Message from '../Message/Message'
import Personal from '../Personal/Personal'
import NotFound from '../../components/NotFound/Not-found'
import {NavBar} from  'antd-mobile'
import  NavFooter from '../../components/NavFooter/NavFooter'
import  Chat from '../Chat/Chat'


class Main extends Component {
  // 底部导航列表数据
  navList = [
    {
      path: '/dashen', //
      
      component: Dashen, title: '大神列表', icon: 'dashen', text: '大神',
    }, {
      path: '/boss', //
      
      component: Boss, title: '老板列表', icon: 'laoban', text: '老板',
    }, {
      path: '/message', //
      
      component: Message, title: '消息列表', icon: 'message', text: '消息',
    }, {
      path: '/personal', //
      
      component: Personal, title: '用户中心', icon: 'personal', text: '个人',
    },
  ]
  
  render () {
    // Main组件对用户是否登录了， 进行验证， 访问main下面的路由都需要过验证
    let _id = cookies.get('userid')
    // console.log(_id)
    // 如果cookie中没有userid 说明该用户没有登录或者登录过  那么直接跳转到login页面
    
    if (!_id) {
      console.log('没有登录')
      return <Redirect to={'/login'}></Redirect>
    }
    // 如果有cookie 但是没有store中的_id,那么返回null空页面
    let {user} = this.props
    // debugger;
    if (!user.data.userid) {
      return null
    } else {
      // 如果store中有userid，那么拿到路由的path进path进行判断
      let pathname = this.props.location.pathname
      if (pathname === '/') {
        // 如果路径是 / 那么就是首页， 首页显示什么  根据type 和 header来跳转到其他页面
        let path = getRedirect(0, user.data.type, user.data.header) // 计算出新的path
        console.log(path)
        return <Redirect to={path}></Redirect>
      }
    }
    //  准备数据 分析
    let {navList}  = this
    // 获取当前路由的path
    let  pathname = this.props.location.pathname
    let currentNeedShowNavIdx = null // 当前需要显示的nav正好和pathname相反
   // pathname === '/dashen'?  currentNeedShowNavIdx = '/boss' :
    if (pathname === '/dashen')  {
      currentNeedShowNavIdx = '/boss'
    } else if( pathname === '/boss') {
      currentNeedShowNavIdx = '/dashen'
    } else {
      currentNeedShowNavIdx = pathname
    }
    
    // 数据find遍历 navList， 判断数组中的成员值是否有 和pathname相同的path属性值 得到一个当前的匹配的路由对象
    let currentNav = navList.find(value => value.path === currentNeedShowNavIdx)
    // console.log(currentNav)
    
    // 根据用户类型过滤数组决定要显示的底部TabBar的逻辑
    if (user.data.type === 'dashen') {
    //  如果登录用户的类型是 dashen 过滤数组中 的path  为 /boss的
      navList =  navList.filter(value => value.path != '/boss' )
      // console.log(navList)
    } else if(user.data.type === 'boss') {
      //  如果登录用户的类型是 boss 过滤数组中 的path  为 /dashen的
      navList =  navList.filter(value => value.path != '/dashen' )
      // console.log(navList)
    }
    // console.log(pathname)
    let {unReadMsgCount} = this.props
    // 如果上面都没匹配到那么默认匹配下面的路由
    return (
      <div className='main-page'>
        {/* 主页的头部 是否显示取决于currentNav是否存在 如果info页面已有nav了就不能显示这个头部导航  */}
        {currentNav? <NavBar className={'user-navbar sticky-header'}>{currentNav.title}</NavBar> : null  }
        <Switch>
          {/*遍历navList 生成Route*/}
          {navList.map((value,index) =>   <Route path={value.path}  component={value.component} key={index} />   )}
          <Route path='/bossinfo' component={BossInfo}></Route>
          <Route path='/dasheninfo' component={DashenInfo}></Route>
          <Route path='/chat/:userid' component={Chat}></Route>
          <Route component={NotFound}></Route>
        
        </Switch>
        {/*是否显示底部？  显示的话给组件传入nav列表数组*/}
        {currentNav? <NavFooter  unReadMsgCount={unReadMsgCount}  navList={navList}  />: null}
      </div>
    )
  }
  
  componentDidMount () {
    // 生命周期钩子函数中进行判断
    let _id = cookies.get('userid')
    // console.log(this.props.user.data)
    // 如果cookie中有userid说明登录过, 但是store中没有userid 那么需要发送ajax请求来获取用户信息
    if (_id && !this.props.user.data.userid) {
      console.log('该用户浏览器中有cookie，但是store中没有user信息，现在将发送ajax')
      // dispatch 发送ajax获取 服务器中的用户最新信息保存到store中 ，如果获取到了store更新就会触发main组件的重新渲染
      this.props.getUser()
    }
  }
}

export default connect(
  state => ({user: state.user, unReadMsgCount: state.chat.unReadMsgCount} ),
  {getUser},
)(Main)
